﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>zyOffice for ckeditor4</title>
    <link type="text/css" rel="Stylesheet" href="demo.css" />
    <link type="text/css" rel="Stylesheet" href="zyoffice/js/skygqbox.css" />
    <script type="text/javascript" src="zyoffice/js/json2.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="zyoffice/js/jquery-1.4.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="zyoffice/js/skygqbox.js" charset="utf-8"></script>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="zyoffice/js/w.js" charset="utf-8"></script>
    <script type="text/javascript" src="vue.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="demo.js" charset="utf-8"></script>
</head>
<body>
    <div id="demos"></div>    
    <div id="ck">
        <ckeditor ref="ck"></ckeditor><br/>
        <ckeditor></ckeditor>
    </div>
    <script>
        Vue.component('ckeditor', {
            data: function(){
                return {
                    editor: null, eid:"editor"+(new Date().getTime())
                }
            },
            props: {
                value: '',
                config: {}
            },
            mounted: function () {
                zyOffice.getInstance({
                    word: "http://localhost:13710/zyoffice/word/convert",
					wordExport:"http://localhost:13710/zyoffice/word/export",
					pdf:"http://localhost:13710/zyoffice/pdf/upload"                    
                });//加载控件

                CKEDITOR.config.extraPlugins = 'zyoffice,zywordexport,zyofficepdf';

                CKEDITOR.on('currentInstance', function()
                {
                    if(CKEDITOR.currentInstance)
                    {
                        zyOffice.getInstance().SetEditor(CKEDITOR.currentInstance);
                    }
                });
        
                //加载CKEditor编辑器
                this.editor = CKEDITOR.replace(this.eid);
            },
            methods: {
                getCKData: function(){
                    return this.editor.getData()
                }
            },
            destroyed: function(){
                this.editor.destroy()
            },
            template: '<div><textarea :id="eid" name="editor"/></div>'
        });

        var ck = new Vue({
            el: '#ck',
            data: {
            }
            , mounted: function () {
            }
        });
    </script>
</body>
</html>